<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>test</title>
        <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.7/css/layui.css"  media="all">
        <link rel="stylesheet" href="css/drawer.css"  media="all">
        <style>
            .drawer-header {
                border-bottom: 1px solid #DEE1E6;
                padding: 15px 15px;
                line-height: 2;
            }
            .drawer-header-title{
                width: 100%;
                height: 20px;
                line-height: 20px;
                font-size: 16px;
                color: #17233d;
                font-weight: 600;
                overflow: hidden;
                display: inline-block;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .drawer-header-content{
                width: 100%;
                height: 100%;
                padding: 16px;
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <div id="drawer">
            <div id="side" style="display:none;">
                <div class="drawer-header">
                    <div class="drawer-header-title">这是一个标题</div>
                </div> 
                <div class="drawer-header-content">
                    <span>ababababababa</span>
                </div>
            </div>
            <i class="layui-icon layui-icon-set" id='tig'></i>   
        </div>
        <script src="https://www.layuicdn.com/layui-v2.5.7/layui.js" type="text/javascript"></script>
        <script>
            layui.config({
                base: './js/'
            }).extend({
                drawer: 'layDrawer'
            });

            layui.use(['drawer'], function () {
                var drawer = layui.drawer;
                drawer.render({
                    //trigger和elem只能为id
                    trigger: '#tig'
                    , elem: '#side'
                    , position: 'left'//top   bottom   left   right 默认为left
                    , specs: '250'//默认为230  可以填百分比
                    , open: function () {
                        layer.msg("打开")
                    }
                    , close: function () {
                        layer.msg("关闭")
                    }
                });
            });



        </script>
    </body>
</html>
